<!--
 * @Author: caofujun
 * @Date: 2020-10-12 10:07:18
 * @Description:
-->
<template>
  <div>
    <div v-if="select" class="radio-wrap" :class="isPC ? '' : 'mobile-radio'">
      <el-radio-group v-model="select" size="mini">
        <el-radio-button v-if="visibileToday" label="today">当天</el-radio-button>
        <el-radio-button label="date">近三十天</el-radio-button>
        <el-radio-button label="week">近八周</el-radio-button>
        <el-radio-button label="month">近6个月</el-radio-button>
        <el-radio-button label="quarter">近4季度</el-radio-button>
        <el-radio-button label="custom" @click.native="dialogVisible=true">自定义</el-radio-button>
      </el-radio-group>
    </div>
    <CustomDateTimePicker :dialog-visible="dialogVisible" @chooseDateTime="chooseDateTime" @closeCustomDateTimePickerDialog="dialogVisible=false" />
  </div>
</template>
<script>
import CustomDateTimePicker from '@/components/CustomDateTimePicker'
import { IsPC, dateTimeMap } from '@/utils'
import moment from 'moment'
moment.locale('zh-cn')

export default {
  name: 'TabDateTime',
  components: { CustomDateTimePicker },
  props: {
    visibileToday: {
      type: Boolean,
      default: false
    },
    selectType: {
      type: String,
      default: 'date' // 选项: today:今日 date：三十日 week:周  month：近6月  custom: 自定义
    }
  },
  data() {
    return {
      isPC: '',
      dialogVisible: false,
      select: ''
    }
  },
  watch: {
    select: {
      immediate: true,
      handler(val) {
        if (val === '') return
        const data = {}
        switch (val) {
          case 'today':
            data.startTime = moment().startOf('day').format('YYYY-MM-DD HH:mm:ss')
            data.endTime = moment().format('YYYY-MM-DD HH:mm:ss')
            break
          case 'date':
            data.startTime = moment().subtract(30, 'days').format('YYYY-MM-DD HH:mm:ss')
            data.endTime = moment().format('YYYY-MM-DD HH:mm:ss')
            break
          case 'week':
            data.startTime = moment().subtract(7, 'week').startOf('week').format('YYYY-MM-DD HH:mm:ss')
            data.endTime = moment().endOf('week').format('YYYY-MM-DD HH:mm:ss')
            break
          case 'month':
            data.startTime = moment().subtract(5, 'month').startOf('month').format('YYYY-MM-DD HH:mm:ss')
            data.endTime = moment().endOf('month').format('YYYY-MM-DD HH:mm:ss')
            break
          case 'quarter':
            data.startTime = moment().subtract(3, 'quarter').startOf('quarter').format('YYYY-MM-DD HH:mm:ss')
            data.endTime = moment().endOf('quarter').format('YYYY-MM-DD HH:mm:ss')
            break
          default:
            break
        }
        if (val !== 'custom') {
          this.dialogVisible = false
          data.type = dateTimeMap[val]
          data.typeDesc = val
          this.$emit('chooseDateTime', data)
        } else {
          this.dialogVisible = true
        }
      }
    }
  },
  mounted() {
    this.select = this.selectType
    this.isPC = IsPC()
  },
  methods: {
    chooseDateTime(val) {
      this.$emit('chooseDateTime', val)
    }
  }
}
</script>

<style rel="stylesheet/scss"  lang="scss" scoped>
.mobile-radio{
  /deep/ .el-radio-button__inner{
    padding: 5px !important;
  }
}
.radio-wrap {
  /deep/ .el-radio-button{
    margin: 0 5px;
    border-radius: 2px;
    border: 1px solid #DCDFE6;
  }
  /deep/ .el-radio-button__inner{
    border: 0;
    border-radius: 2px;
  }
}

</style>
